<template>
	<view class="apply">
		<view class="part">
			<view class="title">请选择自提点已具备冰箱/冰柜的功能</view>
			<view class="list">
				<view class="line dFlex jStart_aCenter" @tap="changeStatus(1)">
					<view class="status imgPublic">
						<image v-if="!is_lc" src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/unsel.png" mode="widthFix"></image>
						<image v-if="is_lc" src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/sel.png" mode="widthFix"></image>
					</view>
					<view class="lineContent">
						<view class="desc">有冷藏功能</view>
						<view class="smallTxt">0~10℃，可存放鲜奶、冷冻肉等</view>
					</view>
				</view>
				<view class="line dFlex jStart_aCenter" @tap="changeStatus(2)">
					<view class="status imgPublic">
						<image v-if="!is_ld" src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/unsel.png" mode="widthFix"></image>
						<image v-if="is_ld" src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/sel.png" mode="widthFix"></image>
					</view>
					<view class="lineContent">
						<view class="desc">有冷冻功能</view>
						<view class="smallTxt">-18度以下，可放速冻食品、冷冻肉等</view>
					</view>
				</view>
			</view>
		</view>
		<view class="part">
			<view class="title">请上传<text>冷藏和冷冻设备</text>照片</view>
			<view class="secondTit">如果您有两台冰箱或冰柜，请上传两台设备的照片</view>
			<view class="imgs dFlex jStart_aStart fWap">
				<view class="imgOne imgPublic" v-for="(item,index) in images" :key='index'>
					<image :src="item" mode="widthFix" @tap.stop='lookBig(item)'></image>
					<view class="del imgPublic" @tap.stop='delImg(index)' >
						<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/del.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="upTool imgPublic" v-if="images.length<9" @tap='upImg'>
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/upTool.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view :class="['bottomBtn',device == 'ios'?'ios_padding':'']">
			<view class="btn" v-if="!btnFlag">{{btnTxt}}</view>
			<view class="btn active" v-if="btnFlag" @tap='subInfo'>{{btnTxt}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				device:getApp().globalData.platform,
				is_lc:false,
				is_ld:false,
				images:[],
				address_id:'',
				btnFlag:false,
				btnTxt:'提交申请'
			};
		},
		onLoad(e) {
			this.initData();
		},
		onShareAppMessage() {
			this.tool.monitor();
			return {
				title:'加一精选',
				path:'/pages/seller',
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			} 
		},
		onShareTimeline() {
			this.tool.monitor();
			let share = {
				title:'加一精选',
				path:'/pages/seller',
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			}
			return share;
		},
		methods:{
			// 个人中心数据
			initData(){
				this.tool.getData('/api/user/info',{}).then(res=>{
					// console.log(res);
					if(res){
						this.address_id = res.address_id;
						this.is_lc = res.is_lc == '1'?true:false;
						this.is_ld = res.is_ld == '1'?true:false;
						this.images = res.ice_imgs?res.ice_imgs.split(','):[];
						this.checkForm();
						if(this.images.length || this.is_lc || this.is_ld){
							this.btnTxt = '修改申请'
						}
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 修改状态
			changeStatus(idx){
				if(idx == 1){
					this.is_lc = !this.is_lc;
				}else{
					this.is_ld = !this.is_ld;
				}
				this.checkForm();
			},
			// 提交申请
			subInfo(){
				if(!this.is_lc && !this.is_ld){
					uni.showToast({
						title:'至少选中一个冷藏或冷冻功能',
						icon:"none"
					})
					return;
				}
				if(!this.images.length){
					uni.showToast({
						title:"至少上传一张相关图片",
						icon:"none"
					})
					return;
				}
				this.tool.getData('/api/user/saveIceTeam',{
					is_lc:this.is_lc?1:0,
					is_ld:this.is_ld?1:0,
					ice_imgs:this.images.join(','),
					address_id:this.address_id,
				}).then(res=>{
					// console.log(res);
					if(res){
						uni.showModal({
							content:'申请成功',
							success: (op) => {
								if(op.confirm){
									this.initData();
									setTimeout(()=>{
										uni.navigateBack({
											delta:1,
										})
									},1650)
								}
							}
						})
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 上传图片
			upImg(){
				let len = 9-this.images.length?9-this.images.length:0;
				if(len){
					uni.chooseImage({
						count: len, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album','camera'], //从相册选择
						success:(res)=>{
							if(res.tempFilePaths.length){
								res.tempFilePaths.map((item,index)=>{
									this.tool.upImg(item).then(thumb=>{
										if(thumb){
											this.images.push(thumb.fullurl);
										}
										this.checkForm();
									}).catch(err=>{
										console.log(err);
									})
								})
							}
						},
						fail:(err)=>{
							uni.showToast({
								title:"图片选择失败",
								icon:"none"
							})
						},
						complete:()=>{
							
						},
					})
				}else{
					uni.showToast({
						title:'最多上传9张图片',
						icon:"none"
					})
				}
			},
			// 删除图片
			delImg(idx){
				this.images.splice(idx,1);
				this.checkForm();
			},
			// 查看大图
			lookBig(url){
				uni.previewImage({
					current:url,
					urls:this.images,
				})
			},
			checkForm(){
				if((this.is_lc || this.is_ld) && this.images.length){
					this.btnFlag = true;
				}else{
					this.btnFlag = false;
				}
			}
		}
	}
</script>

<style lang="scss">
	.apply{
		width: 100%;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		.bottomBtn{
			width: 100%;
			position: fixed;
			bottom: 0;
			background: white;
			left: 0;
			padding:20rpx 30rpx 0;
			box-sizing: border-box;
			.btn{
				width: 100%;
				text-align: center;
				padding: 24rpx 0;
				background: #F4F4F4;
				color:#999999;
				font-size: 16px;
				font-weight: bold;
				border-radius:50px;
			}
			.active{
				background: $col_active;
				color: #ffffff;
			}
		}
		.ios_padding{
			padding-bottom:env(safe-area-inset-bottom);
		}
		.part{
			width: 100%;
			padding:40rpx 30rpx;
			box-sizing: border-box;
			background: white;
			border-radius:20rpx;
			margin-bottom: 20rpx;
			.title{
				width: 100%;
				font-size: 16px;
				font-weight: bold;
				text{
					color: $col_active;
				}
			}
			.secondTit{
				width: 100%;
				font-size: 13px;
				color: #999999;
				margin: 10rpx 0 20rpx;
			}
			.list{
				width: 100%;
				margin-top: 30rpx;
				.line{
					width: 100%;
					padding: 30rpx 0;
					border-bottom: 1px solid #D8D8D8;
					.lineContent{
						flex: 1;
						.desc{
							font-size: 16px;
							font-weight: bold;
							margin-bottom: 8rpx;
						}
						.smallTxt{
							font-size: 13px;
							color: #999999;
						}
					}
					.status{
						width: 40rpx;
						height: 40rpx;
						margin-right: 30rpx;
					}
				}
				.line:last-child{
					border: none;
				}
			}
			.imgs{
				width: 100%;
				box-sizing: border-box;
				.upTool{
					width: 75px;
					height: 75px;
					margin-right:0;
				}
				.imgOne{
					width: 75px;
					height: 75px;
					border-radius: 4px;
					margin-right: 6px;
					margin-bottom: 8px;
					position: relative;
					overflow:hidden;
					image{
						width: 100%;
						height: 100%;
					}
					.del{
						width: 16px;
						height: 16px;
						position: absolute;
						top: 0;
						right: 0;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
				.imgOne:nth-child(4n + 4){
					margin-right: 0;
				}
			}
		}
	}
</style>
